<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="成果名称" prop="scientificName">
        <el-input
          v-model="queryParams.scientificName"
          placeholder="请输入成果名称"  
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="专利号" prop="patentNo">
        <el-input
          v-model="queryParams.patentNo"
          placeholder="请输入专利号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请人" prop="applicantName">
        <el-input
          v-model="queryParams.applicantName"
          placeholder="请输入申请人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请日期" prop="applicationDate">
        <el-date-picker clearable
          v-model="queryParams.applicationDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择申请日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发明人" prop="inventorName">
        <el-input
          v-model="queryParams.inventorName"
          placeholder="请输入发明人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="公开日期">
        <el-date-picker
          v-model="daterangePublicDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="评审等级" prop="evaluateLeval">
        <el-select v-model="queryParams.evaluateLeval" placeholder="请选择评审等级" clearable>
          <el-option
            v-for="dict in dict.type.tcsp_scientific_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="ipc类型" prop="ipcType">
        <el-select v-model="queryParams.ipcType" placeholder="请选择ipc类型" clearable>
          <el-option
            v-for="dict in dict.type.tcsp_scientific_ipctype"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
       <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.tcsp_scientific_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--  -->
    <el-row v-if="this.$store.getters.adminShow">
      <el-col v-for="(info, scientificId) in scientificInfoList" :key="scientificId" style="margin:10px 0">
        <el-card :body-style="{ padding: '10px'  }" shadow="hover" >
          <div @click="showSciInfoDetail(info)">
            <div class="sciInfo-left" style="margin-left: 20px">
              <el-image 
                style="width: 90%; height: 80%"
                :src="info.showPic" 
                >
              </el-image>
            </div>
            <div class="sciInfo-right">
              <div class="inner-title">
                <div class="contentRightTitle">{{info.scientificName}}</div>
                <el-tag :type="info.status.type">{{info.status.label}}</el-tag>
              </div>
              <div class="inner-content">
                <div class="left-content">
                  <div class="sci-content">
                    申请(专利)号：
                    <span class="sci-data">{{info.patentNo}}</span>
                  </div>
                  <div class="sci-content">
                    公开号：
                    <span class="sci-data">{{info.publicNumber}}</span>
                  </div>
                  <div class="sci-content">
                    申请人：
                    <span class="sci-data">{{info.applicantName}}</span>
                  </div>
                  <div class="sci-content">
                    评价等级：
                    <el-tag :type="info.evaluateLeval.type">{{info.evaluateLeval.label}}</el-tag>
                  </div>
                </div>
                <div class="right-content">
                  <div class="sci-content">
                    申请日：
                    <span>{{ parseTime(info.applicationDate, '{y}-{m}-{d}') }}</span>
                  </div>
                  <div class="sci-content" v-if="info.publicDate != null">
                    公开日：
                     <span>{{ parseTime(info.publicDate, '{y}-{m}-{d}') }}</span>
                  </div>
                  <div class="sci-content">
                    发明人：
                    <span class="sci-data">{{info.inventorName}}</span>
                  </div>
                  <div class="eval-button">
                    <el-button @click.stop="handleEval(info.scientificId)"  type="primary" plain>在线评估</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>



    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="状态" prop="evalStatus">
            <el-select v-model="formData.evalStatus" placeholder="请选择状态" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="评估等级" prop="evalLevel">
            <el-select v-model="formData.evalLevel" placeholder="请选择评估等级" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in evalOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="评估意见" prop="evalRemark">
            <el-input 
            v-model="formData.evalRemark" 
            type="textarea" 
            :rows="5" 
            placeholder="请输入评估意见"
            :style="{width: '100%'}"></el-input>
        </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
import { listScientificInfo, getScientificInfo, delScientificInfo, addScientificInfo, updateScientificInfo } from "@/api/tcsp/scientificInfo";
import { sciEval } from "@/api/tcsp/online";
import store from "@/store";    //用于获取用户角色
export default {
  inheritAttrs: false,
  name: "ScientificInfo",
  dicts: ['tcsp_scientific_level', 'tcsp_scientific_ipctype', 'tcsp_scientific_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 科技成果表格数据
      scientificInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // ipc类型时间范围
      daterangePublicDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scientificName: null,
        patentNo: null,
        applicantName: null,
        agency: null,
        applicationDate: null,
        inventorName: null,
        publicDate: null,
        evaluateLeval: null,
        ipcType: null,
        status: null
      },
      // 表单参数
      form: {},
      // 表单校验
      formData: {
        scienId: undefined,
        evalStatus: undefined,
        evalLevel: undefined,
        evalRemark: undefined,
      },
      rules: {
        status: [{
          required: true,
          message: '请选择状态',
          trigger: 'change'
        }],
        eval: [{
          required: true,
          message: '请选择评估等级',
          trigger: 'change'
        }],
        evalremark: [{
          required: true,
          message: '请输入评估意见',
          trigger: 'blur'
        }],
      },
      statusOptions: [{
        "label": "失效",
        "value": 0
      }, {
        "label": "有效",
        "value": 1
      }, {
        "label": "再审",
        "value": 2
      }, {
        "label": "其他",
        "value": 3
      }],
      evalOptions: [{
        "label": "等级A",
        "value": 0
      }, {
        "label": "等级B",
        "value": 1
      }, {
        "label": "等级C",
        "value": 2
      }, {
        "label": "等级D",
        "value": 3
      }, {
        "label": "等级E",
        "value": 4
      }, {
        "label": "暂未评级",
        "value": 5
      }],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
    /** 查询科技成果列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangePublicDate && '' != this.daterangePublicDate) {
        this.queryParams.params["beginPublicDate"] = this.daterangePublicDate[0];
        this.queryParams.params["endPublicDate"] = this.daterangePublicDate[1];
      }
      listScientificInfo(this.queryParams).then(response => {
        this.scientificInfoList = response.rows;
        this.scientificInfoList.forEach(element => {
          this.dict.type.tcsp_scientific_status.forEach(e =>{
            if (e.value == element.status) {
              element.status = e;
              if (e.value == '0') {
                //失效
                element.status.type= 'warning'
              } else if (e.value == '1') {
                //有效
                element.status.type='success'
              } else if (e.valid == '2') {
                //再审
                element.status.type =''
              } else if (e.value == '3') {
                //其他
                element.status.type ='info'
              }
            }
            this.dict.type.tcsp_scientific_level.forEach(el =>{
              if(el.value == element.evaluateLeval) {
                element.evaluateLeval = el;
              }
            })
          })
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        scientificId: null,
        scientificName: null,
        patentNo: null,
        applicantName: null,
        publicNumber: null,
        agency: null,
        applicationDate: null,
        inventorName: null,
        agentName: null,
        publicDate: null,
        evaluateLeval: null,
        ipcType: null,
        status: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangePublicDate = [];
      this.resetForm("formData");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.scientificId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          sciEval(this.formData).then(response=>{
            if (response.code == 200) {
              this.$modal.msgSuccess("评估成功");
              this.open =false;
              this.resetQuery();
              this.formData = {
                scienId: undefined,
                evalStatus: undefined,
                evalLevel: undefined,
                evalRemark: undefined,
              }
            }
          })
        }
      });
    },
    showSciInfoDetail(info){
      //这里需要做一个页面跳转，跳转到详情页
      //跳转页面 newScientificInfo.vue
      const params = {}
      this.$tab.openPage("成果详情",'/tcsp/scien-query/query/'+ info.scientificId ,params)
    },
    handleEval(id) {
        this.open=true;
        this.formData.scienId = id
    },
  }
};
</script>


<style scoped>
  .sciInfo-left {
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 10px;
    cursor: pointer;
    float: left;
    margin-top: 10px;
    width: 15%;
    height: 162px;
  }
  .sciInfo-right {
    --mainColor: #213774;
    --systemColor: #213774;
    --hoverBorColor: #dbe4f4;
    --listBgColor: #fff;
    --titleColor: #000;
    --textColor: #727272;
    --greyColor: #adadad;
    --greyBorColor: #979797;
    --hoverBgColor: #265fbe;
    --homebgColor: #dbe4f4;
    --listItemBgColor: #e5effe;
    --listItemShadow: #dbe4f4;
    --color: #125840;
    --homeBg: #f0f2f5;
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 15px;
    cursor: pointer;
    float: left;
    width: 81%;
    margin-left: 20px;
  }
  .inner-title {
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 5px;
    height: 40px;
    -webkit-box-align: center;
    align-items: center;
  }
  .contentRightTitle {
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    font-size: 15px!important;
    color: var(--titleColor);
    font-weight: 700;
    padding-top: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 45%;
  }
  .left-content {
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 15px;
    cursor: pointer;
    line-height: 20px;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .right-content {
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 15px;
    cursor: pointer;
    line-height: 20px;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .sci-content {
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    line-height: 20px;
    font-size: 15px!important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--titleColor);
    font-weight: 300;
    margin-bottom: 6px;
  }
  .sci-data{
    -webkit-text-size-adjust: 100%;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    line-height: 20px;
    font-size: 13px!important;
    white-space: nowrap;
    font-weight: 300;
    color: var(--textColor);
  }
  .eval-button{
    float: right;
    margin-bottom: 10px;
  }

</style>